<template>
  <transition name="opacity">
    <div id="my_toast" :class="isShow?toastData.model:'toast_beyond'" @click="hideToast()">
      <div class="inner_toast">
        <!-- <slot name="icon"></slot> -->
        <span class="toast_msg">{{toastData.msg}}</span>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Toastbar',
  data () {
    return {
      isShow: false,
      hasAnimate: true,
      onHiding: null,
      toastData: {
        icon: '',
        msg: '',
        model: 'toast_center',
        ms: 1000
      }
    }
  },
  created () {
    var _this = this
    alphaHub.$on('showToast', function (data) {
      clearTimeout(_this.onHiding)
      _this.toastData.msg = data.msg || '网络不给力，请刷新重试。'
      _this.toastData.model = data.model || 'toast_center'
      _this.toastData.ms = data.ms || 3000
      _this.isShow = true
      _this.onHiding = setTimeout(function () {
        _this.isShow = false
        clearTimeout(_this.onHiding)
      }, _this.toastData.ms)
    })
    alphaHub.$on('hideToast', function () {
      clearTimeout(_this.onHiding)
      _this.isShow = false
      // _this.toastData = {
      //     msg:'',
      //     model:'toast_top',
      // };
    })
  },
  computed: {},
  methods: {
    hideToast: function () {
      alphaHub.hideToast()
    }
  },
  destroyed: function () {
    alphaHub.$off('showToast')
    alphaHub.$off('hideToast')
  }
}
</script>

<style scoped>
#my_toast {
  position: fixed;
  z-index: 9999;
  width: 100%;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner_toast {
  max-width: calc(100% - 120px);
  padding: 8px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  color: #370000;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* box-shadow: 1px 1px 1px #670014; */
  background: #ffeca2;
  /*background: linear-gradient(left, #34e0d1, #30c0b1); !* 标准的语法 *!*/
  /*background: -webkit-linear-gradient(left, #34e0d1, #30c0b1); !* Safari 5.1 - 6.0 *!*/
  /*background: -o-linear-gradient(left, #34e0d1, #30c0b1); !* Opera 11.1 - 12.0 *!*/
  /*background: -moz-linear-gradient(left, #34e0d1, #30c0b1); !* Firefox 3.6 - 15 *!*/
}
.toast_icon,
.toast_msg {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
}
.toast_icon {
  margin-left: 20px;
  width: 30px;
  height: 30px;
  background: #ffffff;
  border-radius: 100%;
}
.toast_beyond {
  top: -90px;
  visibility: hidden;
}
.toast_top {
  top: 0;
  visibility: visible;
}
.toast_center {
  top: 50%;
  margin-top: -60px;
  visibility: visible;
}
.error_icon {
  background: #fa3232;
}
</style>
